<template>
  <div class="shop-container">
    <div class="search-section animate__animated animate__fadeInDown">
      <el-input style="width: 200px; margin-right: 20px" placeholder="搜索商品" v-model="searchKey" prefix-icon="el-icon-search"></el-input>
      <el-button style="margin-left: 10px;" type="primary" @click="load" class="el-icon-search">搜索</el-button>
      <el-button style="margin-left: 10px;" type="warning" @click="reset" class="el-icon-refresh">重置</el-button>
      <el-button style="margin-left: 20px;" type="success" icon="el-icon-shopping-cart" @click="viewCart">购物车</el-button>
      <el-button style="margin-left: 20px;" type="info" icon="el-icon-s-home" @click="goHome">返回主页</el-button>
    </div>

    <div class="products-section">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="product in filteredProducts" :key="product.productId">
          <el-card class="product-card animate__animated animate__fadeIn">
            <div class="product-image">
              <img src="https://via.placeholder.com/150" alt="商品图片" />
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.productName }}</h3>
              <div class="product-origin"><i class="el-icon-location"></i> {{ product.origin }}</div>
              <div class="product-price">¥ {{ product.price }}</div>
              <div class="product-description">{{ product.description }}</div>
              <div class="product-actions">
                <el-button type="primary" size="small" @click="showProductDetail(product)">详情</el-button>
                <el-button type="success" size="small" @click="addToCart(product)">加入购物车</el-button>
                <el-button type="danger" size="small" icon="el-icon-plus" circle @click="handleDirectAddToCart(product)" title="直接加入购物车"></el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 商品详情对话框 -->
    <el-dialog title="商品详情" :visible.sync="productDialogVisible" width="50%">
      <el-descriptions :column="2" border v-if="currentProduct">
        <el-descriptions-item label="商品名称">{{ currentProduct.productName }}</el-descriptions-item>
        <el-descriptions-item label="产地">{{ currentProduct.origin }}</el-descriptions-item>
        <el-descriptions-item label="价格">¥ {{ currentProduct.price }}</el-descriptions-item>
        <el-descriptions-item label="存储温度">{{ currentProduct.minTemp }}°C ~ {{ currentProduct.maxTemp }}°C</el-descriptions-item>
        <el-descriptions-item label="采摘时间">{{ formatDate(currentProduct.harvestTime) }}</el-descriptions-item>
        <el-descriptions-item label="溯源码">{{ currentProduct.traceCode }}</el-descriptions-item>
        <el-descriptions-item label="商品描述" :span="2">{{ currentProduct.description }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="productDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleDirectAddToCart(currentProduct)">加入购物车</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'animate.css/animate.min.css';

export default {
  name: 'Shop',
  data() {
    return {
      products: [],
      searchKey: '',
      productDialogVisible: false,
      currentProduct: null,
      currentUser: null,
      validProductIds: null
    }
  },
  computed: {
    filteredProducts() {
      if (!this.searchKey) {
        return this.products;
      }
      const keyword = this.searchKey.toLowerCase();
      return this.products.filter(product => 
        product.productName.toLowerCase().includes(keyword) || 
        product.description.toLowerCase().includes(keyword) ||
        product.origin.toLowerCase().includes(keyword)
      );
    }
  },
  created() {
    this.getCurrentUser();
    this.load();
  },
  methods: {
    // 获取当前登录用户
    getCurrentUser() {
      try {
        // 从localStorage获取用户信息
        const userStr = localStorage.getItem('user');
        if (userStr) {
          this.currentUser = JSON.parse(userStr);
        }
        
        if (!this.currentUser || !this.currentUser.id) {
          this.$message.warning('您尚未登录，请先登录系统');
          // 可以选择重定向到登录页
          // if (this.$route.path !== '/login') {
          //   this.$router.push('/login');
          // }
        }
      } catch (error) {
        console.error('获取用户信息失败', error);
        this.$message.error('获取用户信息失败');
      }
    },
    // 加载商品列表
    load() {
      this.request.get("/product/list").then(res => {
        if (res.code === '200') {
          // 打印API返回的原始数据
          console.log('API返回的完整数据:', res);
          
          // 避免空数据报错
          if (!res.data || res.data.length === 0) {
            this.$message.warning('暂无商品数据');
            return;
          }
          
          console.log('API返回的数据结构：', JSON.stringify(res.data[0]));
          
          // 创建有效的商品ID列表，用于后续加入购物车
          this.validProductIds = new Map();
          
          // 尝试修复productId问题
          this.products = res.data.map(item => {
            // 寻找有效ID字段
            let validId = null;
            
            // 检查字段有效性
            if (item.id) {
              validId = item.id;
            } else if (item.productId) {
              validId = item.productId;
            }
            
            // 确保有ID
            if (validId) {
              const name = item.productName || item.name;
              this.validProductIds.set(name, validId);
              console.log(`商品[${name}]使用有效ID: ${validId}`);
              item.productId = validId;
            }
            return item;
          });
          
          // 控制台打印第一个商品的完整信息
          if (this.products.length > 0) {
            console.log('处理后第一个商品对象:', this.products[0]);
            console.log('有效的商品ID映射表:', this.validProductIds);
          }
        } else {
          this.$message.error('获取商品列表失败');
        }
      });
    },
    // 重置搜索
    reset() {
      this.searchKey = '';
    },
    // 查看购物车
    viewCart() {
      if (!this.currentUser || !this.currentUser.id) {
        this.$message.warning('请先登录');
        return;
      }
      
      // 判断当前路径，避免重复导航
      if (this.$route.path !== '/cart') {
        this.$router.push('/cart');
      }
    },
    // 显示商品详情
    showProductDetail(product) {
      this.currentProduct = product;
      this.productDialogVisible = true;
    },
    // 添加到购物车
    addToCart(product) {
      if (!this.currentUser || !this.currentUser.id) {
        this.$message.warning('请先登录');
        return;
      }
      
      // 输出整个product对象，查看结构
      console.log('加购商品对象', product);
      console.log('商品ID类型:', typeof product.productId);
      
      // 由于productId是一个带有getter/setter的对象，需要获取其真实值
      const productData = JSON.parse(JSON.stringify(product));
      console.log('转换后的商品对象:', productData);
      console.log('转换后的商品ID:', productData.productId);
      
      // 尝试获取商品ID (可能是productId, id, 或其他字段)
      let finalProductId = null;
      if (productData.productId) {
        finalProductId = productData.productId;
      } else if (productData.id) {
        finalProductId = productData.id;
      } else {
        // 遍历对象所有属性，查找可能的ID字段
        for (const key in productData) {
          if (key.toLowerCase().includes('id') && 
              productData[key] && 
              typeof productData[key] !== 'object') {
            console.log(`找到可能的ID字段: ${key} = ${productData[key]}`);
            finalProductId = productData[key];
            break;
          }
        }
      }
      
      console.log('最终确定的商品ID:', finalProductId);
      
      // 临时方案：根据商品名称分配一个临时ID
      if (!finalProductId) {
        // 使用固定映射 - 更新为实际数据库中的ID
        const nameToIdMap = {
          '红富士苹果': 100001,
          '巨峰葡萄': 100002,
          '西瓜': 100003,
          '灵宝大枣': 100008
        };
        
        const productName = productData.productName || productData.name;
        if (nameToIdMap[productName]) {
          finalProductId = nameToIdMap[productName];
          console.log(`使用名称映射获取ID: ${productName} -> ${finalProductId}`);
        } else {
          // 如果没有映射，使用名称的hashCode作为ID
          finalProductId = this.getHashCode(productName);
          console.log(`使用名称哈希码作为ID: ${productName} -> ${finalProductId}`);
        }
      }
      
      if (!finalProductId) {
        this.$message.error('无法确定商品ID，无法加入购物车');
        return;
      }
      
      // 直接调用加入购物车方法
      this.directAddToCart(finalProductId, 1);
    },
    
    // 字符串转换为哈希码
    getHashCode(str) {
      let hash = 0;
      for (let i = 0; i < str.length; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash = hash & hash; // Convert to 32bit integer
      }
      // 确保结果为正数且不超过2147483647
      return Math.abs(hash) % 2147483647;
    },
    
    // 处理直接加入购物车
    handleDirectAddToCart(product) {
      if (!this.currentUser || !this.currentUser.id) {
        this.$message.warning('请先登录');
        return;
      }
      
      // 输出整个product对象，查看结构
      console.log('直接加购商品对象', product);
      console.log('直接加购商品ID类型:', typeof product.productId);
      
      // 由于productId是一个带有getter/setter的对象，需要获取其真实值
      const productData = JSON.parse(JSON.stringify(product));
      console.log('直接加购转换后的商品对象:', productData);
      console.log('直接加购转换后的商品ID:', productData.productId);
      
      // 尝试获取商品ID (可能是productId, id, 或其他字段)
      let finalProductId = null;
      if (productData.productId) {
        finalProductId = productData.productId;
      } else if (productData.id) {
        finalProductId = productData.id;
      } else {
        // 遍历对象所有属性，查找可能的ID字段
        for (const key in productData) {
          if (key.toLowerCase().includes('id') && 
              productData[key] && 
              typeof productData[key] !== 'object') {
            console.log(`找到可能的ID字段: ${key} = ${productData[key]}`);
            finalProductId = productData[key];
            break;
          }
        }
      }
      
      console.log('最终确定的商品ID:', finalProductId);
      
      // 临时方案：根据商品名称分配一个临时ID
      if (!finalProductId) {
        // 使用固定映射
        const nameToIdMap = {
          '红富士苹果': 100001,
          '巨峰葡萄': 100002,
          '西瓜': 100003,
          '灵宝大枣': 100008
        };
        
        const productName = productData.productName || productData.name;
        if (nameToIdMap[productName]) {
          finalProductId = nameToIdMap[productName];
          console.log(`使用名称映射获取ID: ${productName} -> ${finalProductId}`);
        } else {
          // 如果没有映射，使用名称的hashCode作为ID
          finalProductId = this.getHashCode(productName);
          console.log(`使用名称哈希码作为ID: ${productName} -> ${finalProductId}`);
        }
      }
      
      if (!finalProductId) {
        this.$message.error('无法确定商品ID，无法加入购物车');
        return;
      }
      
      // 调用实际的加购方法
      this.directAddToCart(finalProductId, 1);
    },
    
    // 原始的直接加入购物车方法
    directAddToCart(productId, quantity) {
      if (!this.currentUser || !this.currentUser.id) {
        this.$message.warning('请先登录');
        return;
      }
      
      // 打印传入的参数，帮助调试
      console.log('直接加购 - 商品ID:', productId, '类型:', typeof productId);
      console.log('直接加购 - 数量:', quantity, '类型:', typeof quantity);
      
      // 检查productId是否有效
      if (!productId) {
        this.$message.error('商品ID无效，无法添加到购物车');
        return;
      }
      
      // 确保productId是整数
      const pid = parseInt(productId);
      const qty = parseInt(quantity || 1);
      
      console.log('转换后的参数 - 商品ID:', pid, '类型:', typeof pid);
      
      // 使用Axios的params参数
      this.request.post(`/cart/save/${this.currentUser.id}`, null, {
        params: {
          productId: pid,
          quantity: qty
        }
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('成功添加到购物车');
        } else {
          this.$message.error(res.msg || '添加到购物车失败');
        }
      }).catch(err => {
        console.error('加入购物车失败:', err);
        this.$message.error('网络错误，加入购物车失败');
      });
    },
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    // 返回主页
    goHome() {
      if (this.$route.path !== '/home') {
        this.$router.push('/home');
      }
    }
  }
}
</script>

<style scoped>
.shop-container {
  padding: 20px;
}

.search-section {
  margin-bottom: 30px;
  display: flex;
  align-items: center;
}

.products-section {
  margin-top: 20px;
}

.product-card {
  margin-bottom: 20px;
  transition: all 0.3s;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.product-image {
  text-align: center;
  margin-bottom: 15px;
}

.product-image img {
  max-width: 100%;
  height: 150px;
  object-fit: cover;
}

.product-info {
  padding: 0 10px;
}

.product-name {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
  height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-origin {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.product-description {
  color: #999;
  font-size: 14px;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 15px;
}

.product-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.el-input-number {
  width: 150px;
}
</style> 